<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../../js/tools.js"></script>
    <style>
        button{
            background-color: rgb(232, 55, 16);
            color: aliceblue;
        }
        #tishi{
            width: 200px;
            height: 40px;
            background-color: bisque;
            color: orangered;
            display: none;
        }
    </style>
</head>

<body>
    <div>
        <div id="tishi">请输入合法内容</div>
        用户名:<input type="text" id="username"><span></span><br>
        设置密码: <input type="text" id="password"><span></span><br>
        确认密码: <input type="text" id="password2"><span></span><br>
        姓名:<input type="text" id="myname"><span></span><br>
        身份证号:<input type="text" id="idcard"><span></span><br>
        手机号:<input type="text" id="phone"><span></span><br>
        验证码:<input type="text" id="yanzhengma"><span></span><br>
        <input type="checkbox" id="">我同意并接受 <a>《用户注册协议》</a><br>
        <button>注册</button>
    </div>
    <script>
        var username = $("#username");
        var password = $("#password");
        var password2 = $("#password2");
        var myname = $("#myname");
        var idcard = $("#idcard");
        var phone = $("#phone");
        var tishi = $('#tishi')

        username.onchange = function () {
            // 删除掉首位的空格
            var str = this.value;
            str = str.replace(/^\s+/, "");
            str = str.replace(/\s+$/, "");
            this.value = str;
        }
        username.oninput = function () {

            // 数字，字母，下划线，开头不能是数字，6-16位
            check(this, 'username');
        }
        password.oninput = function () {

            // 数字，字母，下划线，开头不能是数字，6-16位
            check(this,'password');
        }
        password2.onblur = function () {
            if (password.value == password2.value) {
                this.nextElementSibling.innerHTML = "√"
            } else {
                this.nextElementSibling.innerHTML = "密码不一致"
            }
        }
        myname.oninput = function () {
            check(this, 'myname');
        }
        idcard.oninput = function () {
            check(this, 'idcard');
        }
        phone.oninput = function () {
            check(this, 'phone');
        }
        var myTimer;
        function check(dom,type) {
            if (myTimer) {
                clearTimeout(myTimer);
            }
            myTimer = setTimeout(function () {
                if (regExpCheck(type,dom.value)) {
                    dom.nextElementSibling.innerHTML = "√"
                    dom.nextElementSibling.style.color = "green";
                } else {
                    dom.nextElementSibling.innerHTML = "×"
                    dom.nextElementSibling.style.color = "red";
                    tishi.style.display='block'
                }
            }, 300);
        }

        function $(str) {
            return document.querySelector(str);
        }
    </script>
</body>

</html>